<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a>
  <img src="resources/elbow-end.gif">Application</pre></div><h1>Class <a href="source/Application.html#cls-Ext.Application">Ext.Application</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Application.html#cls-Ext.Application">Application.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Application.html#cls-Ext.Application">Application</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.util.Observable.html" ext:cls="Ext.util.Observable" ext:member="">Observable</a></td></tr></table><div class="description"><p>Represents a Sencha Application. Most Applications consist of at least the application's name and a launch
function:</p>
<pre><code><b>new</b> Ext.Application({
    name: <em>'MyApp'</em>,

    launch: <b>function</b>() {
        this.viewport = <b>new</b> Ext.Panel({
            fullscreen: true,

            id    : <em>'mainPanel'</em>,
            layout: <em>'card'</em>,
            items : [
                {
                    html: <em>'Welcome to My App!'</em>
                }
            ]
        });
    }
});</code></pre>
<p>Instantiating a new application automatically creates a global variable using the configured <a href="output/Ext.Application.html#Ext.Application-name" ext:member="name" ext:cls="Ext.Application">name</a>
property and sets up namespaces for views, stores, models and controllers within the app:</p>
<pre><code><i>//this code is run internally automatically when creating the app</i>
<a href="output/Ext.ns.html" ext:cls="Ext.ns">Ext.ns</a>(<em>'MyApp'</em>, <em>'MyApp.views'</em>, <em>'MyApp.stores'</em>, <em>'MyApp.models'</em>, <em>'MyApp.controllers'</em>);</code></pre>
<p>The launch function usually creates the Application's Viewport and runs any actions the Application needs to
perform when it boots up. The launch function is only expected to be run once.</p>
<p><u>Routes and history support</u></p>
<p>Sencha Applications provide in-app deep linking and history support, allowing your users both to use the back
button inside your application and to refresh the page and come back to the same screen even after navigating.
In-app history support relies on the Routing engine, which maps urls to controller/action pairs. Here's an example
route definition:</p>
<pre><code><i>//Note the # <b>in</b> the url examples below</i>
Ext.Router.draw(<b>function</b>(map) {
    <i>//maps the url http://mydomain.com/#dashboard to the home controller<em>'s index action</i>
    map.connect('</em>dashboard<em>', {controller: '</em>home<em>', action: '</em>index<em>'});

    <i>//fallback route - would match routes like http://mydomain.com/#users/list to the '</em>users<em>' controller'</em>s</i>
    <i>//<em>'list'</em> action</i>
    map.connect(<em>':controller/:action'</em>);
});</code></pre>
<p>If you generated your Sencha app using the Sencha Command application generator script, you'll see this file is
already present in your application's app/routes.js file. History-driven apps can specify the <a href="output/Ext.Application.html#Ext.Application-defaultUrl" ext:member="defaultUrl" ext:cls="Ext.Application">defaultUrl</a>
configuration option, which will dispatch to that url if no url is currently set:</p>
<pre><code><b>new</b> Ext.Application({
    name: <em>'MyApp'</em>,
    defaultUrl: <em>'dashboard'</em>
});</code></pre>
<p><u>Application profiles</u></p>
<p>Applications support multiple app profiles and reconfigure itself accordingly. Here we set up an Application
with 3 profiles - one if the device is a phone, one for tablets in landscape orientation and one for tablets in
portrait orientation:</p>
<pre><code><b>new</b> Ext.Application({
    name: <em>'MyApp'</em>,

    profiles: {
        phone: <b>function</b>() {
            <b>return</b> Ext.is.Phone;
        },
        tabletPortrait: <b>function</b>() {
            <b>return</b> Ext.is.Tablet && Ext.orientation == <em>'portrait'</em>;
        },
        tabletLandscape: <b>function</b>() {
            <b>return</b> Ext.is.Tablet && Ext.orientation == <em>'landscape'</em>;
        }
    }
});</code></pre>
<p>When the Application checks its list of profiles, the first function that returns true becomes the current profile.
The Application will normally automatically detect when a profile change has occurred (e.g. if a tablet is rotated
from portrait to landscape mode) and fire the <a href="output/Ext.Application.html#Ext.Application-profilechange" ext:member="profilechange" ext:cls="Ext.Application">profilechange</a> event. It will also by default inform all
<a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a> on the page that the current profile has changed by calling their
<a href="output/Ext.Component.html#Ext.Component-setProfile" ext:member="setProfile" ext:cls="Ext.Component">setProfile</a> functions. The setProfile function is left as an empty function for you
to implement if your component needs to react to different device/application profiles.</p>
<p>The current profile can be found using <a href="output/Ext.Application.html#Ext.Application-getProfile" ext:member="getProfile" ext:cls="Ext.Application">getProfile</a>. If the Application does not correctly detect device
profile changes, calling the <a href="output/Ext.Application.html#Ext.Application-determineProfile" ext:member="determineProfile" ext:cls="Ext.Application">determineProfile</a> function will force it to re-check.</p></div><div class="hr"></div><a id="Ext.Application-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-autoInitViewport"></a><b><a href="source/Application.html#cfg-Ext.Application-autoInitViewport">autoInitViewport</a></b> : Boolean<div class="mdesc"><div class="short">Will automatically set up the application to work in full screen mode by calling
Ext.Viewport.init if true (defaults ...</div><div class="long">Will automatically set up the application to work in full screen mode by calling
<a href="output/Ext.Viewport.html#Ext.Viewport-init" ext:member="init" ext:cls="Ext.Viewport">Ext.Viewport.init</a> if true (defaults to true)</div></div></td><td class="msource">Application</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-autoUpdateComponentProfiles"></a><b><a href="source/Application.html#cfg-Ext.Application-autoUpdateComponentProfiles">autoUpdateComponentProfiles</a></b> : Boolean<div class="mdesc"><div class="short">If true, automatically calls Ext.Component.setProfile on
all components whenever a application/device profile change ...</div><div class="long">If true, automatically calls <a href="output/Ext.Component.html#Ext.Component-setProfile" ext:member="setProfile" ext:cls="Ext.Component">Ext.Component.setProfile</a> on
all components whenever a application/device profile change is detected (defaults to true)</div></div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-defaultUrl"></a><b><a href="source/Application.html#cfg-Ext.Application-defaultUrl">defaultUrl</a></b> : String<div class="mdesc">When the app is first loaded, this url will be redirected to. Defaults to undefined</div></td><td class="msource">Application</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-listeners"></a><b><a href="source/Observable.html#cfg-Ext.util.Observable-listeners">listeners</a></b> : Object<div class="mdesc"><div class="short">A config object containing one or more event handlers to be added to this
object during initialization.  This should ...</div><div class="long"><p>A config object containing one or more event handlers to be added to this
object during initialization.  This should be a valid listeners config object as specified in the
<a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> example for attaching multiple handlers at once.</p>
<br><p><b><u>DOM events from ExtJs <a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a></u></b></p>
<br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
is usually only done when extra value can be added. For example the <a href="output/Ext.DataView.html" ext:cls="Ext.DataView">DataView</a>'s
<b><code><a href="output/Ext.DataView.html#Ext.DataView-click" ext:member="click" ext:cls="Ext.DataView">click</a></code></b> event passing the node clicked on. To access DOM
events directly from a child element of a Component, we need to specify the <code>element</code> option to
identify the Component property to add a DOM listener to:
<pre><code><b>new</b> Ext.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: <em>'toolbar'</em>
    }],
    listeners: {
        click: {
            element: <em>'el'</em>, <i>//bind to the underlying el property on the panel</i>
            fn: <b>function</b>(){ console.log(<em>'click el'</em>); }
        },
        dblclick: {
            element: <em>'body'</em>, <i>//bind to the underlying body property on the panel</i>
            fn: <b>function</b>(){ console.log(<em>'dblclick body'</em>); }
        }
    }
});</code></pre>
</p></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#listeners" ext:member="#listeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-loadMaskFadeDuration"></a><b><a href="source/Application.html#cfg-Ext.Application-loadMaskFadeDuration">loadMaskFadeDuration</a></b> : Number<div class="mdesc">The number of milliseconds the load mask takes to fade out. Defaults to 1000</div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-loadMaskRemoveDuration"></a><b><a href="source/Application.html#cfg-Ext.Application-loadMaskRemoveDuration">loadMaskRemoveDuration</a></b> : Number<div class="mdesc">The number of milliseconds until the load mask is removed after starting the
<a href="output/Ext.Application.html#Ext.Application-loadMaskFadeDuration" ext:member="loadMaskFadeDuration" ext:cls="Ext.Application">fadeout</a>. Defaults to 1050.</div></td><td class="msource">Application</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-name"></a><b><a href="source/Application.html#cfg-Ext.Application-name">name</a></b> : String<div class="mdesc"><div class="short">The name of the Application. This should be the same as the single global variable that the
application uses, and sho...</div><div class="long">The name of the Application. This should be the same as the single global variable that the
application uses, and should not contain spaces</div></div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-profiles"></a><b><a href="source/Application.html#cfg-Ext.Application-profiles">profiles</a></b> : Object<div class="mdesc">A set of named profile specifications that this application supports. See the intro
docs for an example</div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-scope"></a><b><a href="source/Application.html#cfg-Ext.Application-scope">scope</a></b> : Object<div class="mdesc">The scope to execute the <a href="output/Ext.Application.html#Ext.Application-launch" ext:member="launch" ext:cls="Ext.Application">launch</a> function in. Defaults to the Application
instance.</div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-setProfilesOnLaunch"></a><b><a href="source/Application.html#cfg-Ext.Application-setProfilesOnLaunch">setProfilesOnLaunch</a></b> : Boolean<div class="mdesc">If true, determines the current application profile on launch and calls
<a href="output/Ext.Application.html#Ext.Application-updateComponentProfiles" ext:member="updateComponentProfiles" ext:cls="Ext.Application">updateComponentProfiles</a>. Defaults to true</div></td><td class="msource">Application</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-useHistory"></a><b><a href="source/Application.html#cfg-Ext.Application-useHistory">useHistory</a></b> : Boolean<div class="mdesc">True to automatically set up Ext.History support (defaults to true)</div></td><td class="msource">Application</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-useLoadMask"></a><b><a href="source/Application.html#cfg-Ext.Application-useLoadMask">useLoadMask</a></b> : Boolean/String<div class="mdesc"><div class="short">True to automatically remove an application loading mask when the
DOM is ready. If set to true, this expects a div ca...</div><div class="long">True to automatically remove an application loading mask when the
DOM is ready. If set to true, this expects a div called "loading-mask" to be present in the body.
Pass the id of some other DOM node if using a custom loading mask element. Defaults to false.</div></div></td><td class="msource">Application</td></tr></tbody></table><a id="Ext.Application-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.Application-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-addEvents"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-addEvents">addEvents</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Object|String&nbsp;o</span><span class="comma">,&nbsp;</span><span title="Required" class="required">string&nbsp;Optional.</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Adds the specified events to the list of events which this Observable may fire.</div><div class="long">Adds the specified events to the list of events which this Observable may fire.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object|String<div class="sub-desc">Either an object with event names as properties with a value of <code>true</code>
or the first event name string if multiple event names are being passed as separate parameters.</div></li><li><code>Optional.</code> : string<div class="sub-desc">Event name if multiple event names are being passed as separate parameters.
Usage:<pre><code>this.addEvents(<em>'storeloaded'</em>, <em>'storecleared'</em>);</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addEvents" ext:member="#addEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-addListener"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-addListener">addListener</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;handler</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;scope]</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;options]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Appends an event handler to this object.</div><div class="long">Appends an event handler to this object.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to listen for. May also be an object who's property names are event names. See</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes.</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.
properties. This may contain any of the following properties:<ul>
<li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
<b>If omitted, defaults to the object which fired the event.</b></div></li>
<li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
<li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
<li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed
by the specified number of milliseconds. If the event fires again within that time, the original
handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
<li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
if the event was bubbled up from a child Observable.</div></li>
<li><b>element</b> : String<div class="sub-desc"><b>This option is only valid for listeners bound to <a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a>.</b>
The name of a Component property which references an element to add a listener to.
<p>This option is useful during Component construction to add DOM event listeners to elements of <a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a> which
will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:<pre><code><b>new</b> Ext.Panel({
    title: <em>'The title'</em>,
    listeners: {
        click: this.handlePanelClick,
        element: <em>'body'</em>
    }
});</code></pre></p>
<p>When added in this way, the options available are the options applicable to <a href="output/Ext.Element.html#Ext.Element-addListener" ext:member="addListener" ext:cls="Ext.Element">Ext.Element.addListener</a></p></div></li>
</ul><br>
<p>
<b>Combining Options</b><br>
Using the options argument, it is possible to combine different types of listeners:<br>
<br>
A delayed, one-time listener.
<pre><code>myPanel.on(<em>'hide'</em>, this.handleClick, this, {
single: true,
delay: 100
});</code></pre>
<p>
<b>Attaching multiple handlers in 1 call</b><br>
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple events. For example:<pre><code>myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this <i>// Important. Ensure <em>"this"</em> is correct during handler execution</i>
});</code></pre>.
<p></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addListener" ext:member="#addListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-addManagedListener"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-addManagedListener">addManagedListener</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Observable|Element&nbsp;item</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object|String&nbsp;ename</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;fn</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object&nbsp;scope</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object&nbsp;opt</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed...</div><div class="long"><p>Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : Observable|Element<div class="sub-desc">The item to which to add a listener/listeners.</div></li><li><code>ename</code> : Object|String<div class="sub-desc">The event name, or an object containing event name properties.</div></li><li><code>fn</code> : Function<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
is the handler function.</div></li><li><code>scope</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
is the scope (<code>this</code> reference) in which the handler function is executed.</div></li><li><code>opt</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
is the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> options.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addManagedListener" ext:member="#addManagedListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-clearListeners"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-clearListeners">clearListeners</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Removes all listeners for this object including the managed listeners</div><div class="long">Removes all listeners for this object including the managed listeners<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#clearListeners" ext:member="#clearListeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-clearManagedListeners"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-clearManagedListeners">clearManagedListeners</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Removes all managed listeners for this object.</div><div class="long">Removes all managed listeners for this object.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#clearManagedListeners" ext:member="#clearManagedListeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-determineProfile"></a><b class="method"><a href="source/Application.html#method-Ext.Application-determineProfile">determineProfile</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Boolean&nbsp;silent</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Calls each configured profile function, marking the first one that returns true as the current
application profile. F...</div><div class="long">Calls each configured <a href="output/Ext.Application.html#Ext.Application-profile" ext:member="profile" ext:cls="Ext.Application">profile</a> function, marking the first one that returns true as the current
application profile. Fires the 'beforeprofilechange' and 'profilechange' events if the profile has changed<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>silent</code> : Boolean<div class="sub-desc">If true, the events profilechange event is not fired</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-dispatch"></a><b class="method"><a href="source/Application.html#method-Ext.Application-dispatch">dispatch</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Object&nbsp;options</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Boolean</span><div class="mdesc"><div class="short">Dispatches to a given controller/action combo with optional arguments.</div><div class="long">Dispatches to a given controller/action combo with optional arguments.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>options</code> : Object<div class="sub-desc">Object containing strings referencing the controller and action to dispatch
to, plus optional args array</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if the controller and action were found and dispatched to, false otherwise</div></li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-enableBubble"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-enableBubble">enableBubble</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String/Array&nbsp;events</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="output/Ext.Component.getBubbleTarget.html" ext:cls="Ext.Component.getBubbleTarget">Ext.Component.getBubbleTarget</a>. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.</p>
<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {
<i>//  Add functionality to Field&#39;s initComponent to enable the change event to bubble</i>
initComponent : Ext.createSequence(Ext.form.Field.prototype.initComponent, <b>function</b>() {
    this.enableBubble(<em>'change'</em>);
}),

<i>//  We know that we want Field&#39;s events to bubble directly to the FormPanel.</i>
getBubbleTarget : <b>function</b>() {
    <b>if</b> (!this.formPanel) {
        this.formPanel = this.findParentByType(<em>'form'</em>);
    }
    <b>return</b> this.formPanel;
}
});

<b>var</b> myForm = <b>new</b> Ext.formPanel({
title: <em>'User Details'</em>,
items: [{
    ...
}],
listeners: {
    change: <b>function</b>() {
        <i>// Title goes red <b>if</b> form has been modified.</i>
        myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);
    }
}
});</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>events</code> : String/Array<div class="sub-desc">The event name to bubble, or an Array of event names.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#enableBubble" ext:member="#enableBubble" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-fireEvent"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-fireEvent">fireEvent</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object...&nbsp;args</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Boolean</span><div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Obse...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
<p>An event may be set to bubble up an Observable parent hierarchy (See <a href="output/Ext.Component.html#Ext.Component-getBubbleTarget" ext:member="getBubbleTarget" ext:cls="Ext.Component">Ext.Component.getBubbleTarget</a>)
by calling <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble" ext:member="enableBubble" ext:cls="Ext.util.Observable">enableBubble</a>.</p><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to fire.</div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers.</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true.</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#fireEvent" ext:member="#fireEvent" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-getProfile"></a><b class="method"><a href="source/Application.html#method-Ext.Application-getProfile">getProfile</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">String</span><div class="mdesc"><div class="short">Gets the name of the currently-detected application profile</div><div class="long">Gets the name of the currently-detected application profile<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The profile name</div></li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-hasListener"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-hasListener">hasListener</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Boolean</span><div class="mdesc"><div class="short">Checks to see if this object has any listeners for a specified event</div><div class="long">Checks to see if this object has any listeners for a specified event<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#hasListener" ext:member="#hasListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-launch"></a><b class="method"><a href="source/Application.html#method-Ext.Application-launch">launch</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;profile</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Boolean</span><div class="mdesc"><div class="short">Called automatically when the page has completely loaded. This is an empty function that should be
overridden by each...</div><div class="long">Called automatically when the page has completely loaded. This is an empty function that should be
overridden by each application that needs to take action on page load<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>profile</code> : String<div class="sub-desc">The detected <a href="output/Ext.Application.html#Ext.Application-profiles" ext:member="profiles" ext:cls="Ext.Application">application profile</a></div></li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">By default, the Application will dispatch to the configured startup controller and
action immediately after running the launch function. Return false to prevent this behavior.</div></li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-on"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-on">on</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;handler</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;scope]</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;options]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Appends an event handler to this object (shorthand for addListener.)</div><div class="long">Appends an event handler to this object (shorthand for <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a>.)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#on" ext:member="#on" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-relayEvents"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-relayEvents">relayEvents</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Object&nbsp;o</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Array&nbsp;events</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Relays selected events from the specified Observable as if the events were fired by this.</div><div class="long">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object<div class="sub-desc">The Observable whose events this object is to relay.</div></li><li><code>events</code> : Array<div class="sub-desc">Array of event names to relay.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#relayEvents" ext:member="#relayEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-removeListener"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-removeListener">removeListener</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;handler</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;scope]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Removes an event handler.</div><div class="long">Removes an event handler.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event the handler was associated with.</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove. <b>This must be a reference to the function passed into the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> call.</b></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope originally specified for the handler.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#removeListener" ext:member="#removeListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-removeManagedListener"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-removeManagedListener">removeManagedListener</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Observable|Element&nbsp;item</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object|String&nbsp;ename</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;fn</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Object&nbsp;scope</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Removes listeners that were added by the mon method.</div><div class="long">Removes listeners that were added by the <a href="output/Ext.util.Observable.html#Ext.util.Observable-mon" ext:member="mon" ext:cls="Ext.util.Observable">mon</a> method.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : Observable|Element<div class="sub-desc">The item from which to remove a listener/listeners.</div></li><li><code>ename</code> : Object|String<div class="sub-desc">The event name, or an object containing event name properties.</div></li><li><code>fn</code> : Function<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
is the handler function.</div></li><li><code>scope</code> : Object<div class="sub-desc">Optional. If the <code>ename</code> parameter was an event name, this
is the scope (<code>this</code> reference) in which the handler function is executed.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#removeManagedListener" ext:member="#removeManagedListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-resumeEvents"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-resumeEvents">resumeEvents</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
event...</div><div class="long">Resume firing events. (see <a href="output/Ext.util.Observable.html#Ext.util.Observable-suspendEvents" ext:member="suspendEvents" ext:cls="Ext.util.Observable">suspendEvents</a>)
If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
events fired during event suspension will be sent to any listeners now.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#resumeEvents" ext:member="#resumeEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-suspendEvents"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-suspendEvents">suspendEvents</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Boolean&nbsp;queueSuspended</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Suspend the firing of all events. (see resumeEvents)</div><div class="long">Suspend the firing of all events. (see <a href="output/Ext.util.Observable.html#Ext.util.Observable-resumeEvents" ext:member="resumeEvents" ext:cls="Ext.util.Observable">resumeEvents</a>)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>queueSuspended</code> : Boolean<div class="sub-desc">Pass as true to queue up suspended events to be fired
after the <a href="output/Ext.util.Observable.html#Ext.util.Observable-resumeEvents" ext:member="resumeEvents" ext:cls="Ext.util.Observable">resumeEvents</a> call instead of discarding all suspended events;</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#suspendEvents" ext:member="#suspendEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-un"></a><b class="method"><a href="source/Observable.html#method-Ext.util.Observable-un">un</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;eventName</span><span class="comma">,&nbsp;</span><span title="Required" class="required">Function&nbsp;handler</span><span class="comma">,&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;scope]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Removes an event handler (shorthand for removeListener.)</div><div class="long">Removes an event handler (shorthand for <a href="output/Ext.util.Observable.html#Ext.util.Observable-removeListener" ext:member="removeListener" ext:cls="Ext.util.Observable">removeListener</a>.)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event the handler was associated with.</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove. <b>This must be a reference to the function passed into the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> call.</b></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope originally specified for the handler.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#un" ext:member="#un" ext:cls="Ext.util.Observable">Observable</a></td></tr></tbody></table><a id="Ext.Application-events"></a><h2>Public Events</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Event</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-beforeprofilechange"></a><b class="event"><a href="source/Application.html#event-Ext.Application-beforeprofilechange">beforeprofilechange</a></b><span class="colon">&nbsp;:&nbsp;</span><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;profile</span><span class="comma">,&nbsp;</span><span title="Required" class="required">String&nbsp;oldProfile</span><span class="closeparen">&nbsp;)</span><span>&nbsp;</span><div class="mdesc"><div class="short">Fires when a change in Application profile has been detected, but before any action is taken to
update the applicatio...</div><div class="long">Fires when a change in Application profile has been detected, but before any action is taken to
update the application's components about the change. Return false from any listener to cancel the
automatic updating of application components (see <a href="output/Ext.Application.html#Ext.Application-autoUpdateComponentProfiles" ext:member="autoUpdateComponentProfiles" ext:cls="Ext.Application">autoUpdateComponentProfiles</a>)<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>profile</code> : String<div class="sub-desc">The name of the new profile</div></li><li><code>oldProfile</code> : String<div class="sub-desc">The name of the old profile (may be undefined)</div></li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-launch"></a><b class="event"><a href="source/Application.html#event-Ext.Application-launch">launch</a></b><span class="colon">&nbsp;:&nbsp;</span><span class="openparen">(&nbsp;</span><span title="Required" class="required">Ext.Application&nbsp;app</span><span class="closeparen">&nbsp;)</span><span>&nbsp;</span><div class="mdesc"><div class="short">Fires when the application is launched</div><div class="long">Fires when the application is launched<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>app</code> : Ext.Application<div class="sub-desc">The Application instance</div></li></ul></div></div></div></td><td class="msource">Application</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Application-profilechange"></a><b class="event"><a href="source/Application.html#event-Ext.Application-profilechange">profilechange</a></b><span class="colon">&nbsp;:&nbsp;</span><span class="openparen">(&nbsp;</span><span title="Required" class="required">String&nbsp;profile</span><span class="comma">,&nbsp;</span><span title="Required" class="required">String&nbsp;oldProfile</span><span class="closeparen">&nbsp;)</span><span>&nbsp;</span><div class="mdesc"><div class="short">Fires when a change in Applicatino profile has been detected and the application's components have
already been infor...</div><div class="long">Fires when a change in Applicatino profile has been detected and the application's components have
already been informed. Listeners can perform additional processing here if required<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>profile</code> : String<div class="sub-desc">The name of the new profile</div></li><li><code>oldProfile</code> : String<div class="sub-desc">The name of the old profile (may be undefined)</div></li></ul></div></div></div></td><td class="msource">Application</td></tr></tbody></table></div>